<template>
  <div class="admin-app">
    <el-container>
      <el-header>
        <el-button type="primary" @click="toggleDark">切换暗黑模式</el-button>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <AsideComponent :isDark="isDark" :routeList="routeList"></AsideComponent>
        </el-aside>
        <el-container>
          <el-main>
            <el-scrollbar>
              <RouterView />
            </el-scrollbar>
          </el-main>
          <el-footer :class="{ 'el-footer-dark': isDark }">
            <p>@copy by 富豪班 ©️2025</p>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { routersList } from '@/router/index'
import { ref } from 'vue'
import { useDark } from '@vueuse/core'
import AsideComponent from './components/AsideComponent.vue'

const routeList = ref<any>(routersList)
const isDark = useDark()
const toggleDark = () => {
  isDark.value = !isDark.value
}
</script>

<style lang="scss" scoped>
.admin-app {
  height: 100%;
  width: 100%;
}

.el-container {
  height: 100%;
}

.el-header {
  // background-color: rgba(34, 147, 162, 0.186);
  padding: 0 10px;
}

.el-aside {
  // background-color: rgb(176, 220, 127);
}

.el-main {
  // background-color: rgb(111, 145, 179);
  padding: 10px;
  height: calc(100vh - 120px);
}

.el-footer {
  // background-color: rgb(172, 102, 183);
  padding: 0 10px;
  // color: #fff;
  display: grid;
  place-items: center;
}

.el-scrollbar {
  height: calc(100vh - 60px);
}
</style>
